<template>
  <div>
    <el-button type="primary" @click="exportCSV">导出CSV</el-button>
    <br>
    <div>
      <el-radio-group v-model="radio2">
        <el-radio-button label="表格" />
<!--        <el-radio-button label="导图" />-->
      </el-radio-group>
    </div>

    <el-table
      ref="multipleTableRef"
      :data="trendStore.tableData"
      style="width: 100%"
      height="850"
      v-show="radio2 == '表格'"
    >
      <el-table-column property="j_y_k_h" width="180" label="交易卡号" />
      <el-table-column property="j_y_z_h" width="180" label="交易账号" />
      <el-table-column property="c_x_f_k_j_g_y_y_y" label="查询反馈结果原因" />
      <el-table-column property="level" label="追踪层级" />
      <el-table-column property="j_y_h_m" label="交易户名" />
      <el-table-column property="j_y_z_j_h_m" label="交易证件号码" />
      <el-table-column property="j_y_s_j" width="165" label="交易时间" />
      <el-table-column property="j_y_j_e" width="120" label="交易金额" />
      <el-table-column property="j_y_y_e" width="120" label="交易余额" />
      <el-table-column property="s_f_b_z" label="收付标志" />
      <el-table-column property="j_y_d_s_z_h" width="180" label="交易对手账卡号" />
      <el-table-column property="x_j_b_z" label="现金标志" />
      <el-table-column property="d_s_h_m" label="对手户名" />
      <el-table-column property="d_s_s_f_z_h" label="对手身份证号" />
      <el-table-column property="d_s_k_h_y_h" label="对手开户银行" />
      <el-table-column property="z_y_s_m" label="摘要说明" />
      <el-table-column property="j_y_b_z" label="交易币种" />
      <el-table-column property="j_y_w_d_m_c" label="交易网点名称" />
      <el-table-column property="j_y_f_s_d" label="交易发生地" />
      <el-table-column property="j_y_s_f_c_g" label="交易是否成功" />
      <el-table-column property="p_h" label="传票号" />
      <el-table-column property="IP_d_z" label="IP地址" />
      <el-table-column property="MAC_d_z" label="MAC地址" />
      <el-table-column property="d_s_j_y_y_e" label="对手交易余额" />
      <el-table-column property="j_y_l_s_h" label="交易流水号" />
      <el-table-column property="r_z_h" label="日志号" />
      <el-table-column property="p_z_z_l" label="凭证种类" />
      <el-table-column property="p_z_h" label="凭证号" />
      <el-table-column property="j_y_g_y_h_h" label="交易柜员号" />
      <el-table-column property="b_z" label="备注" />
      <el-table-column property="s_h_m_c" label="商户名称" />
      <el-table-column property="s_h_d_m" label="商户代码" />
      <el-table-column property="j_y_l_x" label="交易类型" />

    </el-table>

    <Test v-show="radio2=='导图'"></Test>
  </div>
</template>
<script setup lang="ts">
import { ElTable, ElButton, ElTableColumn } from 'element-plus';
import { useTrendStore } from '../stores/index';
import {ref } from "vue"
import Test from "./Test.vue";
import 'vue3-mindmap/dist/style.css';

const radio2 = ref("表格")
const trendStore = useTrendStore()
const multipleTableRef = ref(null); // 创建引用
const exportCSV = () => {

  const columns = ['交易卡号','交易账号','查询反馈结果原因','追踪层级','交易户名','交易证件号码','交易时间','交易金额','收付标志','交易对手账卡号','现金标志','对手户名',
                    '对手身份证号','对手开户银行','摘要说明','交易币种','交易网点名称','交易发生地','交易是否成功','传票号','IP地址','MAC地址','对手交易余额','交易流水号',
                    '日志号','凭证种类','凭证号','交易柜员号','备注','商户名称','商户代码','交易类型'
  ]
  // 构建 CSV 文件内容
  const csvContent = [
    columns.join(','), // 列名
  ];
  trendStore.tableData.forEach((row) => {
    // const rowData = row.join(',');
    const temp_String = `${row.j_y_k_h}\t,${row.j_y_z_h}\t,${row.c_x_f_k_j_g_y_y_y}\t,${row.level}级\t,${row.j_y_h_m}\t,${row.j_y_z_j_h_m}\t,${row.j_y_s_j}\t,${row.j_y_j_e}\t,${row.s_f_b_z}\t,${row.j_y_d_s_z_h}\t,${row.x_j_b_z}\t,${row.d_s_h_m}\t,${row.d_s_s_f_z_h}\t,${row.d_s_k_h_y_h}\t,${row.z_y_s_m}\t,${row.j_y_b_z}\t,${row.j_y_w_d_m_c}\t,${row.j_y_f_s_d}\t,${row.j_y_s_f_c_g}\t,${row.p_h}\t,${row.IP_d_z}\t,${row.MAC_d_z}\t,${row.d_s_j_y_y_e}\t,${row.j_y_l_s_h}\t,${row.r_z_h}\t,${row.p_z_z_l}\t,${row.p_z_h}\t,${row.j_y_g_y_h_h}\t,${row.b_z}\t,${row.s_h_m_c}\t,${row.s_h_d_m}\t,${row.j_y_l_x}`
    csvContent.push(temp_String);
  });

  const csvString = csvContent.join('\n');
  // 创建 Blob 对象
  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });

  // 创建下载链接
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  const timestamp = new Date().toISOString().replace(/[:.]/g, '');
  const fileName = `data_${timestamp}.csv`;
  link.download = fileName;
  // 触发下载
  link.click();
};

</script>
<style scoped>

.mind{
  height: 800px;
}
</style>
